<template>
  <div class="card content-box">
    <span class="text"> 百度地图获取地址+经纬度 🍓🍇🍈🍉</span>
    <el-button @click="state.mapVisible = true"> 打开地图 </el-button>
    <div v-if="state.mapVisible && state.ak">
      <BaiduMap :ak="state.ak" :mapVisible="state.mapVisible" @closeMap="closeMap" @confirmMap="confirmMap"></BaiduMap>
    </div>
    <BaiduMap2 :ak="state.ak" :points="state.points"></BaiduMap2>

    <span class="text"> 传入时间戳生成倒计时 🍓🍇🍈🍉</span>
    <template v-for="(item, index) in state.countdownList" :key="index">
      <vue-countdown :time="item.timeStamp" v-slot="{ days, hours, minutes, seconds }" @end="handleEnd(item, index)">
        {{ item.label }}：剩余{{ days < 10 ? `0${days}` : days }} 天, {{ hours < 10 ? `0${hours}` : hours }} 时,
        {{ minutes < 10 ? `0${minutes}` : minutes }} 分, {{ seconds < 10 ? `0${seconds}` : seconds }} 秒
      </vue-countdown>
    </template>
  </div>
</template>

<script setup>
import BaiduMap from "@/components/BaiduMap/index.vue";
import BaiduMap2 from "@/components/BaiduMap/index2.vue";
import VueCountdown from "@chenfengyuan/vue-countdown";
import { BAIDU_MAP_AK_KEY } from "@/config";
import { ref, onMounted, nextTick, reactive } from "vue";
const state = reactive({
  // 地图
  ak: BAIDU_MAP_AK_KEY,
  formData: {
    latitude: "",
    longitude: "",
    address: ""
  },
  mapVisible: false,
  points: {
    lng: 113.281955,
    lat: 23.13043,
    address: "地址",
    organName: "别名"
  },
  points1: {
    lng: 113.219329,
    lat: 23.069071
  },
  // 倒计时
  countdownList: [
    { timeStamp: 2 * 24 * 60 * 60 * 1000, label: "2天倒计时" },
    { timeStamp: 3 * 24 * 60 * 60 * 1000, label: "3天倒计时" },
    { timeStamp: 10 * 1000, label: "10秒倒计时" }
  ]
});

// 关闭地图
const closeMap = () => {
  state.mapVisible = false;
};

// 确认选择的地图地点
const confirmMap = map => {
  console.log("map", map);
  state.formData.latitude = map.lng;
  state.formData.longitude = map.lat;
  state.formData.address = map.address;
};

// 触发倒计时结束事件
const handleEnd = (item, index) => {
  state.countdownList[index].timeStamp = 0; // 重置倒计时
  state.countdownList[index].label = "已经结束"; // 已经结束
};
</script>

<style lang="scss" scoped></style>
